<template>
  <card v-bind="cardOptions">
    <!-- 工具栏 -->
    <!-- <y-table-handler>
      <y-table-filter
        v-if="filterOptions[activeName]"
        :options="filterOptions[activeName]"
      ></y-table-filter>
      <y-table-operation
        v-if="operaOptions[activeName]"
        v-bind="operaOptions[activeName]"
      ></y-table-operation>
    </y-table-handler> -->
    <el-tabs v-model="activeName" @tab-click="handleClick" style="">
      <el-tab-pane label="领域设计" name="domain">
        <!-- UML 图 -->
        <uml-panel v-bind="umlOptions" ref="$umlPanel" style="margin-top:10px"></uml-panel>
        <!-- <g6-uml v-bind="umlOptions"></g6-uml> -->
      </el-tab-pane>
      <el-tab-pane label="种子数据" name="second"> </el-tab-pane>
      <el-tab-pane label="界面设计" name="third"> </el-tab-pane>
      <el-tab-pane label="生成预览" name="fourth"> </el-tab-pane>
    </el-tabs>
    <y-button class="next-btn" label="下一步" @click="nextHandler"></y-button>
  </card>
</template>

<script>
export default {
  data() {
    return {
      cardOptions: {
        title: "代码生成器",
      },
      filterOptions: {
        domain: [
          {
            type: "input",
            field: "keyword",
            placeholder: "请输入关键字",
          },
        ],
      },
      operaOptions: {
        domain: {
          btns: [
            { label: "新增", icon: "add", trigger: "add" },
            {
              label: "删除",
              icon: "delete",
              trigger: "delete",
              type: "danger",
            }
          ],
        },
      },
      entityTableOptions: {
        columns: [
          { type: "seq", width: 50 },
          { field: "label", title: "名称" },
          { field: "tableName", title: "表名" },
          { field: "shortName", title: "简称" },
        ],
      },
      umlOptions: {
        options: [
          // {
          //   name: "SalesOrder",
          //   remark: "订单",
          //   fields: [
          //     { name: "code", type: "string", remark: "订单编号" },
          //     { name: "createTime", type: "datetime", remark: "下单时间" },
          //     { name: "source", type: "string", remark: "来源" },
          //     { name: "auditState", type: "enum", remark: "审核状态" },
          //     { name: "tradeState", type: "enum", remark: "交易状态" },
          //     { name: "outerCode", type: "string", remark: "外部订单" },
          //   ],
          // },
          // {
          //   name: "SalesOrderDetail",
          //   remark: "订单明细",
          //   fields: [
          //     { name: "code", type: "string", remark: "订单编号" },
          //     { name: "createTime", type: "datetime", remark: "下单时间" },
          //     { name: "source", type: "string", remark: "来源" },
          //     { name: "auditState", type: "enum", remark: "审核状态" },
          //     { name: "tradeState", type: "enum", remark: "交易状态" },
          //     { name: "outerCode", type: "string", remark: "外部订单" },
          //   ],
          // },
        ],
      },
      activeName: "domain",
    };
  },

  methods: {
    handleClick() {},
    nextHandler() {
      var options = ['domain','second','third','fourth']
      var nextIndex = options.indexOf(this.activeName) + 1
      if(nextIndex < options)
        this.activeName = options[nextIndex]
    },
  },
};
</script>


<style lang="scss" scoped>
.el-tabs .el-tabs--top {
  height: 100%;
}
.next-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>